<template>
    <div class="header">
        <div class="header-right">
            <i :class="`el-icon-s-${isCollapse ? 'unfold' : 'fold'}`" @click="changeCollapse"></i>
            <el-breadcrumb separator="/">
                <el-breadcrumb-item v-for="item in tabsList" :key="item.path" :to="{ path: item.path }">{{ item.lable }}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="header-left">
            <el-dropdown>
                <img src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" />
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>个人中心</el-dropdown-item>
                    <el-dropdown-item>退出登录</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
    name: "mianHeader",
    data() {
        return {

        }
    },
    computed: {
        // isCollapse() {
        //     return this.$store.state.tab.isCollapse
        // },
        ...mapState('tab',['isCollapse','tabsList'])
    },
    created() {
        console.log(this.tabsList)
    },
    methods: {
        changeCollapse() {
            this.$store.commit("tab/collapse")
        }
    }
}
</script>

<style lang="less" scoped>
.header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #B3C0D1;
    height: 70px;
    padding: 0px 20px;
    .header-right{
        display: flex;
        align-items: center;
        i{
            font-size: 28px;
            margin-right: 20px;
        }
        /deep/.el-breadcrumb__item {
            .el-breadcrumb__inner{
                font-weight: normal;
                &.is-link{
                    color: #777;
                }
            }
            &:last-child{
                .el-breadcrumb__inner{
                    color: #fff;
                }
            }
        }
    }
    .header-left{
        img{
            width: 45px;
            height: 45px;
            border-radius: 50%;
        }
    }
}
</style>
